<template>
  <div class="m-order-item">
    <!-- 列表 -->
    <div class="lists">
      <div class="order-item">
        <table class="m-order-table clearfix">
          <tr>
            <th class="order-title" colspan="6">
              <div class="c-h-l fl">
                <div class="check-box">
                  <w-checkbox :label="`order${orderIndex}`" name="订单" v-model="order.checked" @on-change="_setStoreToAllCheck"></w-checkbox>
                </div>
                <span>订单编号：<span style="color: #2576FF">{{order.orderId}}</span></span>
                <span style="margin-left: 20px;">下单时间：{{order.payTime || '暂无'}}</span>
              </div>
              <div class="c-h-r fl">
                <span class="store-name">{{order.storeName}}</span>
              </div>
              <div class="fr" style="position: relative;">
                <w-button class="print-btn" type="option" v-if="order.orderStatus >= 30" @on-click="onPrintOrder(order.id)">打印订单</w-button>
                <!-- 标记 -->
                <div class="flag cur" v-if="order.storeSign && order.storeSign != null" @click="signStatus = true">
                  <img src="../../../assets/flag_black.png" alt="">
                </div>
              </div>
            </th>
          </tr>
        </table>
        <!-- 列表 -->
        <div class="clearfix order-list">
          <table style="width: 48%" class="fl">
            <tbody v-for="(goods, goodsIndex) in JSON.parse(order.goodsInfo || '[]')" :key="goodsIndex">
              <tr class="bor-b" v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
                <td class="clearfix goods-list" style="width: 28%">
                  <!-- 缺货标记：out-stock -->
                  <div class="fl goods-main-img">
                    <img v-lazy="goods.goods_mainphoto_path" alt="">
                  </div>
                  <div class="goods-info">
                    <p class="p-line-hide">{{goods.goods_name}}</p>
                    <!-- SKU -->
                    <div class="goods-sku txt-goods" v-if="gsp.goodsSpecContent && gsp.goodsSpecContent.length">
                      <span>{{gsp.goodsSpecName[0]}}：{{gsp.goodsSpecContent[0]}} </span>
                      <span style="margin-left: 16px">{{gsp.goodsSpecName[1]}}：{{gsp.goodsSpecContent[1]}}</span>
                      <br>
                      <span>商品编码：{{goods.goodsSerial}}</span>
                    </div>
                  </div>
                </td>
                <!-- 单价，数量 -->
                <td style="width: 12%;" class="goods-del">
                  <span class="txt-goods number">￥{{(gsp.goodsSinglePrice || 0) | currency}}</span>
                  <div class="number">
                    <span class="txt-goods goods-count">{{gsp.count}}</span>
                  </div>
                  <!-- SKU,已发数量 -->
                  <!-- <div class="dev-count" v-if="order.orderStatus >= 30">
                    <span>已发货：2 </span>
                    <br>
                    <span>总数量：3</span>
                  </div> -->
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 状态，操作等 -->
          <table style="width: 52%" class="fr" :style="{'height': tabHeight}">
            <tbody>
              <tr>
                <!-- 售后操作 -->
                <!-- <td style="width: 8%" class="cus-ser" rowspan="2">
                  <span class="cur" style="color: #2D8EFE">查看标记</span>
                </td> -->
                <!-- 购买人 -->
                <td style="width: 14%" class="buyer txt-m" rowspan="2">
                  <span>{{order.userName}}</span>
                  <br>
                  <span>手机号：{{order.mobile || '--'}}</span>
                </td>
                <!-- 交易状态 -->
                <td style="width: 14%" class="options td-top" rowspan="2">
                  <span class="c-main" v-if="order.settlementMark == 0">待结算</span>
                  <span class="c-main" v-if="order.settlementMark == 1">结算中</span>
                  <span class="c-main" v-if="order.settlementMark == 2">结算完成</span>
                  <span class="c-main" v-if="order.settlementMark == 3">结算失败</span>
                  <span class="c-main" v-if="order.settlementMark == 4">农商行订单结算确认中</span>
                  <br>
                  <span class="det cur" @click="$router.push(`../balanceMange/detail/${order.id}?three=${$route.query.three}`)">详情</span>
                  <br>
                  <div>
                    <button class="btn-option main" v-if="order.settlementMark == 0" @click="fetchBalanceInfo(order.id, order.paymentMark)">结算</button>
                    <button class="btn-option main" v-if="order.settlementMark == 3" @click="fetchBalanceInfo(order.id, order.paymentMark)">再次结算</button>
                  </div>
                  <span class="txt-m" v-if="order.orderStatus == 0">关闭交易</span>
                </td>
                <!-- 实收款 -->
                <td style="width: 14%" class="goods-amount td-top" rowspan="2">
                  <span class="amount">¥{{order.totalPrice | currency}}</span>
                  <br>
                  <span style="color: #999">（含运费：¥{{ (order.shipPrice || 0) | currency}}）</span>
                  <br>
                  <span>{{order.consignor | consignor}}</span>
                </td>
                <!-- 评价 -->
                <!-- <td style="width: 14%" class="sale-evaluate txt-m td-top" rowspan="2">
                  <span>小智</span>
                </td> -->
              </tr>
            </tbody>
          </table>

        </div>
      </div>

    </div>

    <!-- 标记弹出框 -->
    <w-panel-fixed-wrap v-model="signStatus" title="标记备注" :show-btns="showBtnsSign" :panel-title="panelTitleSign" :show-close="showCloseSign">
      <div class="sign-panel">
        <span style="vertical-align: top">标记备注：</span>
        <div class="remark">
          {{order.storeSignInfo}}
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 结算弹框 -->
    <w-panel-fixed-wrap v-model="accountPanel" :width="`1060px`" :height="`542px`" :confirm-text="`结算完成`" @on-confirm="onConfirmBalance">
      <div class="m-account-panel">
        <div class="all-account">
          <w-table :columns="accountColumns"></w-table>
          <div class="all-num">
            <table class="table" v-for="(order, orderIndex) in balanceInfo.orderList" :key="orderIndex">
              <tr v-for="(info, index) in order.goodsInfo" :key="index">
                <td style="width: 16%" :rowspan="len" v-if="index == 0">{{order.orderId}}</td>
                <td style="width: 14%;overflow: hidden;max-width: 20px;" :rowspan="len" v-if="index == 0">{{order.storeName}}</td>
                <td style="width: 10%;overflow: hidden;max-width: 20px;">{{info.goodsSerial}}</td>
                <td class="price" style="width: 7%">¥{{info.factoryPrice | currency}}</td>
                <td class="price" style="width: 6%">¥{{order.isChangePrice == 1 ? info.reviseGoodsPrice : info.goodsGsp[0].goodsSinglePrice | currency}}</td>
                <td style="width: 6%">{{info.goodsTotalcount}}</td>
                <td class="price" style="width: 9%;" :rowspan="len" v-if="index == 0">¥{{order.totalPrice | currency}}</td>
                <td class="price" style="width: 6%" :rowspan="len" v-if="index == 0">¥{{order.shipPrice || 0 | currency}}</td>
                <td style="width: 6%" :rowspan="len" v-if="index == 0">{{order.consignor | consignor}}</td>
                <td class="price c-price" style="width: 10%" :rowspan="len" v-if="index == 0">¥{{order.sysSettlementMoney | currency}}</td>
                <td class="price c-price" style="width: 10%" :rowspan="len" v-if="index == 0">¥{{order.settlementMoney | currency}}</td>
              </tr>
            </table>
          </div>
          <div class="order-info">
            <div>
              <span class="span">订单结算总额：<span class="c-price">{{balanceInfo.orderTotalPrice | currency}}</span>元</span>
              <span class="span">平台结算金额：<span class="c-price">{{balanceInfo.pingtaiTot | currency}}</span>元</span>
              <span class="span">商家结算金额：<span class="c-price">{{balanceInfo.shangjiaTot | currency}}</span>元</span>
            </div>
            <p class="tip">友情提醒：<span style="padding-right: 10px;">商家结算金=订单中商品总出厂价+运费(订单发货方为商家)</span> 平台结算金=订单总金额-商家结算金</p>
          </div>
        </div>
        <div class="account-info">
          <!-- 商家信息 -->
          <div class="store-account">
            <w-mange-title title="商家账号"></w-mange-title>
            <div class="store-info" v-if="storeBank">
              <div>
                <span>账户类型：{{storeBank.bankType | bankType}}</span>
              </div>
              <div>
                <span>账户名称：{{storeBank.trueName}}</span>
              </div>
              <div>
                <span>账户号码：{{storeBank.bankNumber}}</span>
              </div>
              <div>
                <span>开户行：{{storeBank.bankName}}</span>
              </div>
              <div>
                <span>开户行城市：{{storeBank.bankAddress}}</span>
              </div>
            </div>
          </div>

          <!-- 平台信息 -->
          <div>
            <w-mange-title title="平台账号"></w-mange-title>
            <div class="store-info" v-if="platBank">
              <div>
                <span>账户类型：{{platBank.bankType | bankType}}</span>
              </div>
              <div>
                <span>账户名称：{{platBank.trueName}}</span>
              </div>
              <div>
                <span>账户号码：{{platBank.bankNumber}}</span>
              </div>
              <div>
                <span>开户行：{{platBank.bankName}}</span>
              </div>
              <div>
                <span>开户行城市：{{platBank.bankAddress}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  props: {
    orderIndex: [Number, String],
    all: [Boolean], // 是否全选
    orderList: [Array],
    order: [Object, Array] // 订单中商品列表
  },
  data() {
    return {
      showCloseSign: true,
      panelTitleSign: true,
      showBtnsSign: false,
      refundModal: false,
      signStatus: false, // 标记弹出框
      allChecked: this.all,
      accountPanel: false, // 结算弹框
      accountColumns: [
        {title: '订单号', width: '16%'},
        {title: '商家', width: '14%'},
        {title: '货号', width: '10%'},
        {title: '商品出厂价', width: '7%'},
        {title: '平台价', width: '6%'},
        {title: '数量', width: '6%'},
        {title: '订单总额', width: '9%'},
        {title: '运费', width: '6%'},
        {title: '发货方', width: '6%'},
        {title: '平台结算金额', width: '10%'},
        {title: '商家结算金额', width: '10%'}
      ],
      balanceInfo: {},
      storeBank: {},
      platBank: {},
      len: 0,
      orderId: [],
      paymentMark: ''
    }
  },
  computed: {
    ...mapGetters(['token']),
    // 计算每个订单的不同商品sku的总数
    skuLen() {
      let len = 0
      const gList = JSON.parse(this.order.goodsInfo || '[]')
      gList.forEach(goods => {
        len += goods.goodsGsp.length
      })
      return len
    },
    // 计算当前的订单列表高度
    tabHeight() {
      return `${this.skuLen * 112}` + 'px'
    }
  },
  methods: {
    /**
     * 查看结算详情信息
     */
    fetchBalanceInfo(orderId, paymentMark) {
      const idArr = []
      idArr.push(orderId)
      this.len = 0 // 清空脏数据
      apiOrderMange.apiBalanceDetail(this.token, this.$route.query.three, paymentMark, idArr).then(data => {
        // 判断结算信息是否完整
        if (data.code != 200 || !data.code || data.code == 'undefined') {
          return
        }
        this.accountPanel = true // 展示结算弹框
        this.balanceInfo = data.data || {}
        this.balanceInfo.orderList.forEach(list => {
          list.goodsInfo = JSON.parse(list.goodsInfo || '[]')
          this.len += list.goodsInfo.length
        })
        this.storeBank = this.balanceInfo.storeBank // 商家账户信息
        this.platBank = this.balanceInfo.platBank // 平台账户信息
      })
      this.orderId = idArr
      this.paymentMark = paymentMark
    },
    /**
     * 结算
     */
    onConfirmBalance() {
      let nextStep = true
      if (nextStep) { // 禁止重复提交
        apiOrderMange.apiBalanceSave(this.token, this.$route.query.three, this.paymentMark, this.orderId).then(resp => {
          nextStep = false
          this.$toast('结算操作成功', () => {
            this.accountPanel = false
            this.$emit('on-refresh') // 通知上级，重新获取列表数据
          })
        })
      }
    },
    /**
     * 打印订单
     */
    onPrintOrder(orderId) {
      window.open(`/orderMange/print/${orderId}`)
    },
    /**
     * 退款审核
     */
    onRefundReview() {
      this.refundModal = false
    },
    // 判断选中商户的个数，是否和展示的长度相同，true相同，则选中全部，false全部取消
    _setStoreToAllCheck() {
      const orderList = this.orderList
      let aStore = orderList.filter(item => {
        return item.checked === true
      })
      if (aStore.length === orderList.length) {
        this.allChecked = true
      } else {
        this.allChecked = false
      }
      this.$emit('on-checked', this.allChecked)
    }
  },
  filters: {
    /**
     * 过滤账户类型
     */
    bankType(type) {
      if (!type) return
      if (type == 1) {
        return '个人账户'
      } else if (type == 2) {
        return '企业账户'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../scss/_var.scss';
.m-account-panel {
  .all-account {
    border-bottom: 1px solid #D7D7D7;
    .all-num {
      width: 100%;
      margin-top: 12px;
      .table {
        height: 76px;
      }
      .num {
        display: inline-block;
      }
      .price {
        font-weight: bold;
        font-size: 14px;
      }
    }
    .c-price {
      color: #D50000
    }
    .order-info {
      margin: 18px auto;
      .span {
        font-size: 16px;
        padding-right: 20px;
      }
      .tip {
        font-size: 12px;
        color:#222222;
      }
    }
  }
  .account-info {
    .store-info {
      padding-left: 15px;
      font-size: 12px;
      & > div {
        width: 30%;
        display: inline-block;
        margin-bottom: 4px;
      }
    }
  }
}
.btn-option {
  font-size: 12px;
  padding: 0 10px;
  border-radius: 4px;
  width: auto !important;
  height:26px;
  color: #ffffff;
  &.primary {
    background-color: rgba(74,144,226,1);
  }
  &.main {
    background-color:$color-main;
  }
}
.txt-goods {
  color: $color-line-gray;
}
.txt-m {
  color: #313131
}
.bor-b {
  border-bottom: 1px solid #DBDBDB;
  &:last-child {
    border-bottom: none
  }
}
// 顶格书写
.td-top {
  vertical-align: text-top;
  padding-top: 20px;
} 
.m-order-item {
  width: 100%;
  font-size: 12px;
  background-color: #ffffff;
}
.order-item {
  margin-bottom: 10px;
}
.m-order-table {
  width: 100%;
}

.order-list {
  border: 1px solid #DBDBDB;
  border-top: none;
  // margin-bottom: 14px;
}
.order-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #F2F2F2;
  border: 1px solid #DBDBDB;
  padding: 0 20px 0 8px;
  & >div {
    display: inline-block;
  }
  .check-box {
    display: inline-block;
    margin-right: 10px;
    line-height: 22px;
  }
  .c-h-r {
    margin-left: 40px;
    position: relative;
  }
  .store-name {
    font-weight: bold
  }
  .flag {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-left: 20px;
  }
  .print-btn {
    position: absolute;
    right: 30px;
    top: 5px;
    width: 60px;
  }
}
.goods-main-img {
  width: 88px;
  height: 88px;
  margin-right: 14px;
  position: relative;
}
.goods-list { 
  padding: 12px 10px;
}
.goods-info {
  height: 90px;
  position: relative;
  .goods-sku {
    display: inline-block;
    vertical-align: bottom;
    position: absolute;
    color: #999999;
    bottom: 0;
    & > span {
      line-height: 20px;
    }
  }
}
.goods-del {
  padding: 0 5px;
  text-align: center;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  .number {
    width: 42%;
    display: inline-block;
  }
  .dev-count {
    text-align: center;
    color: #606060;
    margin-top: 10px;
  }
  .goods-count {
    border: 1px solid #DBDBDB;
    padding: 5px 10px;
    margin: 0 20px 0 16px;
  }
}
.cus-ser {
  padding: 0 5px;
  text-align: center;
  border-right: 1px solid #DBDBDB;
}
.buyer {
  padding: 0 5px;
  text-align: center;
  color: #313131;
  border-right: 1px solid #DBDBDB;
}
.options {
  text-align: center;
  border-right: 1px solid #DBDBDB;
  .det {
    color: #2D8EFE;
    text-decoration: underline;
  }
  & >span {
    line-height: 24px;
  }
}
.goods-amount {
  text-align: center;
  padding: 5px;
  border-right: 1px solid #DBDBDB;
  & >span {
    line-height: 24px;
  }
  .amount {
    font-weight: bold;
  }
}
.sale-evaluate {
  padding: 5px;
  text-align: center
}
.review-refund {
  margin-left: 30px;
  & > div {
    margin-bottom: 10px;
  }
  .refund-title {
    width: 80px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
  }
  .refund-input {
    display: inline-block;
    width: 280px;
    textarea {
      background-color: transparent
    }
  }
}
</style>
